<template>
      <template v-for="menu in menus" :key="menu.key">
        <!-- 渲染成一级菜单 -->
        <a-menu-item v-if="!menu.children || menu.children.length === 0" :key="menu.key">
            <template #icon>
                <component :is="menu.icon" />
            </template>
             {{ menu.title }}
        </a-menu-item>
        <!-- 渲染成父级菜单 -->
        <a-sub-menu v-if="menu.children  && menu.children.length > 0" :key="menu.key">
            <template #title>
                <component :is="menu.icon" />
                 {{ menu.title }}
            </template>
          <!-- 递归调用自身处理更深层次子菜单 -->
          <RenderSubMenu :menus="menus.children" />
        </a-sub-menu>
      </template>
</template>
  
<script setup>
import { defineProps } from 'vue';

import {AccountBookOutlined} from '@ant-design/icons-vue';

const props = defineProps({
menus: {
    type: Array,
    required: true
}
});
</script>